[初心者向け] Socket.IOのチャットアプリをコンテナ化してみた

こんにちは！コンサル部のinomaso(@inomasosan)です。

今回はSocket.IOのスタートアップガイドで作成したチャットアプリを、コンテナ化していきます。

コンテナ化の方法

Node.jsの公式ドキュメントに、Dockerコンテナにするためのガイドがありますので、そちらをベースに対応していきます。

検証環境

今回実行した環境は以下の通りです。

項目	バージョン
macOS BigSur	11.6.3
Docker Desktop	4.4.2
Node.js	16.14.0 LTS

フォルダ構成

コンテナ化した後のフォルダ構成となります。 新規作成や変更したファイルはコメントをつけたものとなります。

% tree -L 1 -a
.
├── .dockerignore　     //新規作成
├── Dockerfile　        //新規作成
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json　　　　　　　　  //変更

新規作成・変更ファイル

.dockerignore

node_modulesフォルダのローカルモジュールや、デバッグログがDockerイメージにコピーされたり、 イメージ内にインストールされているモジュールが上書きされたりするのを防ぎます。

node_modules
npm-debug.log

Dockerfile

• FROMでnodeのLTSバージョンである16.14.0を指定
  • チャットアプリの動作確認したNode.jsのバージョンに合わせる
• WORKDIRでイメージ内にアプリケーションコードを配置するディレクトリを作成
• 1つ目のCOPYでパッケージの依存関係が記載されているpackage.jsonとpackage-lock.jsonをコピー
• RUNでnpm installを実行し、依存関係のパッケージをインストール
• 2つ目のCOPYでアプリケーションのソースコードを Docker イメージ内にバンドル
• EXPOSEでコンテナが接続用にリッスンするポートに3000指定
• CMDでコンテナ実行時のデフォルト（初期設定）としてnode index.jsを実行し、サーバを起動

FROM node:16.14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "index.js" ]

package.json

ハイライト部分が追記箇所となります。

• mainで入口となるデフォルトのスクリプトファイルを指定
• scriptsでコマンドのエイリアスを定義

{
    "name": "socket-chat-example",
    "version": "0.0.1",
    "description": "my first socket.io app",
    "main": "index.js",
    "scripts": {
      "start": "node index.js"
    },
    "dependencies": {
        "express": "^4.17.2",
        "socket.io": "^4.4.1"
    }
}

Dockerイメージ作成

• -tオプションで指定するイメージ名を指定
• コマンド最後の . はDockerfileのパスを指定

docker build -t socket-chat-example:0.0.1 .

Dockerイメージからコンテナ起動

• -pオプションでポートフォワードの指定
• -dオプションでコンテナをバックグラウンドにて動かす

docker run -p 3000:3000 -d socket-chat-example:0.0.1

ブラウザで動作確認

ブラウザのURLにhttp://localhost:3000入力し、チャットアプリが正常に動作するか確認していきます。

まとめ

公式ドキュメントに必要な手順がまとまっているおかげで、スムーズにコンテナ化することができました。
次回はECSでコンテナを起動してみようと思います。

この記事が、どなたかのお役に立てば幸いです。それでは！